<template>
  <div class="retriever-container">
    <div class="retrieverbox">
      <el-card class="rgba(255,255,255,0)">
        <template #header>
          <h3 style="text-align: center;">找回密码</h3>
        </template>

        <el-form :model="retrieverFrom" :rules="retrieverRules" ref="retrieverFormRef">
          
          <!-- 用户名 -->
          <el-form-item label="账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;户：" prop="username">
            <el-input v-model="retrieverFrom.username" placeholder="请输入用户名"></el-input>
          </el-form-item>

          <!-- 身份 -->
          <el-form-item label="身&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;份：" prop="identity">
            <el-select v-model="retrieverFrom.identity" placeholder="请选择身份">
              <el-option label="管理员" value="1"></el-option>
              <el-option label="作  者" value="2"></el-option>
              <el-option label="用  户" value="3"></el-option>
            </el-select>
          </el-form-item>

          <!-- 手机号 -->
          <el-form-item label="手&nbsp;&nbsp;机&nbsp;&nbsp;号：" prop="userphone">
            <el-input v-model="retrieverFrom.userphone" placeholder="请输入手机号"></el-input>
          </el-form-item>

          <!-- 验证码 -->
          <el-form-item label="验&nbsp;&nbsp;证&nbsp;&nbsp;码：" prop="code">
            <el-input v-model="retrieverFrom.code" placeholder="请输入验证码" style="width: 60%; float: left;"></el-input><br/>
            <el-button type="primary" @click="sendCode"  style=" width: 100px; margin-left:3px ;" >{{ codeText }}</el-button>
            
          </el-form-item>

          <!-- 新密码 -->
          <el-form-item label="新&nbsp;&nbsp;密&nbsp;&nbsp;码：" prop="newpassword">
            <el-input v-model="retrieverFrom.newpassword" type="password" show-password placeholder="请输入新密码"></el-input>
          </el-form-item>

          <!-- 确认新密码 -->
          <el-form-item label="确认密码：" prop="newpassword2">
            <el-input v-model="retrieverFrom.newpassword2" type="password" show-password placeholder="请再次输入新密码"></el-input>
          </el-form-item>

          <!-- 提交按钮 -->
          <el-button type="primary"  style="width: 100%;" @click="submitretriever">提交</el-button>
        </el-form>

        <!-- 返回登录链接 -->
        <p class="retriever-link">
          <router-link to="/">已有账号？去登录</router-link><el-Text class="el-text-left">验证码:</el-Text><el-Text class="el-text-right">{{ codeTexttxt }}</el-Text>
        </p>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import router from '@/router'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import Login from '../Login.vue'

const retrieverFrom = ref({
  username: '',
  identity: '',
  userphone: '',
  code: '', // 验证码
  newpassword: '',
  newpassword2: ''
})


const countdownTimer = 2 // 代表60s 
const isSending = ref(false)
const countdown = ref(countdownTimer)
const codeText = ref('发送验证码')
const codeTexttxt=  ref(null) // 验证码文本

const canSendCode = ref(true)

const retrieverRules = ref({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
  ],
  newpassword: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20', trigger: 'blur' }
  ],
  newpassword2: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    { validator: validatePassword2, trigger: 'blur' }
  ],
  identity: [
    { required: true, message: '请选择身份', trigger: 'change' }
  ],
  userphone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { min: 11, max: 11, message: '请输入11位手机号', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { min: 6, max: 6, message: '请输入6位验证码', trigger: 'blur' }
  ]
})

const retrieverFormRef = ref(null)
function validatePassword2(rule, value, callback) {
  if (value !== retrieverFrom.value.newpassword) {
    callback(new Error('两次输入密码不一致'))
  } else {
    callback()
  }
}

function generateCode(length = 6) {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
  let code = ''
  for (let i = 0; i < length; i++) {
    code += chars[Math.floor(Math.random() * chars.length)]
  }
  return code
}

function sendCode() {
  if (!isSending.value) {
    if (!retrieverFrom.value.userphone || retrieverFrom.value.userphone.length !== 11) {
      ElMessage.warning('请先输入正确的手机号')
      return
    }

    const code = generateCode()
    codeTexttxt.value = code
    ElMessage.success('验证码已生成：' + code)

    isSending.value = true
    countdown.value = countdownTimer

    const timer = setInterval(() => {
      countdown.value--
      codeText.value = `${countdown.value}s 后重发`
      if (countdown.value <= 0) {
        clearInterval(timer)
        codeText.value = '重新发送'
        isSending.value = false
      }
    }, 1000)
  }
}
function submitretriever() {
  // 表单验证
  retrieverFormRef.value.validate((valid) => {
    if (valid) {
      // 验证码校验
      if (retrieverFrom.value.code !== codeTexttxt.value) {
        ElMessage.error('验证码不正确')
        return
      }

      // 提交数据到后端
      axios({
        method: 'POST',
        url: '/api/retriever',
      params: {
          username: retrieverFrom.value.username,
          identity: retrieverFrom.value.identity,
          userphone: retrieverFrom.value.userphone,
          password: retrieverFrom.value.newpassword
        }
      }).then((res) => {
        if(res.data.code === 200){
          ElMessage.success(res.data.msg)
          router.push({
            path: '/',
            query: {
              username: retrieverFrom.value.username,
              password: retrieverFrom.value.newpassword,
              identity: retrieverFrom.value.identity
            }
          })


        }else{
          if(res.data.code === 400){
            ElMessage.error(res.data.msg)
          }else {
            ElMessage.error('修改错误 服务器未响应')
          }
        }
}
)


    }
  })
}

</script>

<style scoped>
.retriever-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("@/assets/images/loginbg.jpg") no-repeat center center fixed;
  background-size: cover;
}

.retrieverbox {
  z-index: 1;
  width: 400px;
  margin: 15% 40%;
  background-color: rgba(255, 255, 255, 0.7);
}

/* 卡片透明 */
.el-card {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 卡片内容背景 */
.el-card__body {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 20px;
  border-radius: 8px;
}

/* 输入框透明 */
.el-input__inner {
  background-color: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* 输入框聚焦时的样式 */
.el-input__inner:focus {
  border-color: #409EFF !important;
}

/* 选择框透明 */
.el-select .el-input__inner {
  background-color: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* 按钮透明 */
.el-button {
  background-color: rgba(64, 158, 255, 0.7) !important;
  border-color: rgba(64, 158, 255, 0.7) !important;
}

/* 按钮悬停 */
.el-button:hover {
  background-color: rgba(64, 158, 255, 0.9) !important;
}

/* 登录链接 */
.retriever-link {
  text-align: center;
  margin-top: 15px;
  font-size: 14px;
}

.el-text-left{
  padding: 20px;
   line-height: 100%;
  color: rgba(64, 158, 255, 0.9);
}
.el-text-right{
  padding: 0;
  
  line-height: 100%;
  color: #ff0000;
}

</style>


